<template>
  <!-- 表单 -->
  <el-form
    :model="loginForm"
    :rules="rules"
    size="small"
    ref="loginForm"
    class="login-form"
  >
    <!-- 账号 -->
    <el-form-item prop="account">
      <el-input
        prefix-icon="el-icon-s-custom"
        v-model="loginForm.account"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <!-- 密码 -->
    <el-form-item prop="password">
      <el-input
        prefix-icon="el-icon-lock"
        :type="type"
        v-model="loginForm.password"
        autocomplete="off"
      >
        <i
          @click="changeType"
          :class="type === 'text' ? 'icon-eye-open' : 'icon-eye-close'"
          slot="suffix"
          class="iconfont"
        ></i>
      </el-input>
    </el-form-item>

    <!-- 登录按钮 -->
    <el-form-item>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { checklogin } from "../../api/user";

// 引入local
import local from "@/utils/local";

// 引入计算动态路由方法
import { calcDynamicRoutes } from "@/router";
export default {
  data() {
    return {
      // 登录表单数据
      loginForm: {
        account: "",
        password: "",
      },
      // 验证规则对象
      rules: {
        // 账号字段
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        // 密码字段
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
      type: "password", // 密码
    };
  },
  methods: {
    // 切换input的type类型
    changeType() {
      this.type === "password" ? (this.type = "text") : (this.type = "password");
    },
    // 登录
    handleLogin() {
      // 选中表单 调用validate 对整个表单进行校验的方法
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          console.log(checklogin);
          try {
          
            let res = await checklogin(this.loginForm);
            let { code, role, token } = res.data;

            if (code === 0) {
              local.set('role', role)
              local.set("t_k", token);
              calcDynamicRoutes()
              this.$router.push("/home");
            }
          } catch (err) {
            this.$message.error(err);
          }
        } else {
          return;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-form {
  padding-right: 20px;
  padding-left: 20px;
  /deep/ .el-form-item__label {
    color: red;
  }
  /deep/ .el-input__inner {
    background-color: transparent;
    color: #fff;
    letter-spacing: 1px;
    &:focus {
      border-color: #568f71;
    }
  }

  .el-button--primary {
    width: 100%;
    background-image: linear-gradient(to bottom right, #534241, #8d9128);
    border-color: #fff;
  }
}
</style>
